<template>
  <div id="personal"> 

        <div class="demo" :style="{  height: dtheight + 'px' }">
               <div class="top_box">
                   <div class="top_img">
                       <img class="top_img_img" v-if="datalist[0].head_img" :src="urlimg + datalist[0].head_img"   /> 
                       <img class="top_img_img"  v-else src="@/assets/images/a7.png" />
                   </div>
                   <div class="top_text" style="flex:1;">
                       <div class="top_text1">
                          <span v-if="datalist[0].nickname"> {{ datalist[0].nickname }}  </span>
                          <span v-else> 未设置  </span>
                          <img src="@/assets/images/personal_vip1.png" v-if="datalist[0].is_vip == 1" class="vip_img" />
                          <img src="@/assets/images/personal_vip2.png" v-if="datalist[0].is_vip == 0" class="vip_img" />
                        </div>
                       <div class="top_text2">注册时间：{{ datalist[0].register_time }}</div>
                   </div>
               </div>
               <div class="con_box">
                     <div class="con_box_title">
                           <img class="con_box_title_img" src="@/assets/images/personal_bg1.png"  />
                           <div class="con_box_title_text"> 个人信息 </div>
                     </div>
                     <div class="con_box_item">
                         <div class="con_box_item1"><span class="con_box_item1_span1">账号信息</span>：
                            <span class="con_box_item1_span2">
                                <span v-if="datalist[0].telphone">{{ datalist[0].telphone }}</span>
                                <span v-else>-</span>
                             </span>
                         </div>
                         <div class="con_box_item2"><span class="con_box_item1_span1">达到权限</span>：
                            <span class="con_box_item1_span2">
                               <span v-for="(a,b) in datalist[0].manor_list" :key="b">          
                                     <span v-if="a.into_direct_limit <= datalist[0].sub_invite_count 
                                            && a.into_invite_limit <= datalist[0].power_child_count 
                                            && a.into_experience_limit <= datalist[0].power_experience ">
                                            <span style="padding:0px 5px;">{{ a.title }} </span>
                                    </span>
                                </span>
                            </span>
                         </div>
                     </div>
                     <div class="con_box_item">
                         <div class="con_box_item1"><span class="con_box_item1_span1">活 跃 度</span>：<span class="con_box_item1_span2">{{ datalist[0].active_days }}</span></div>
                         <div class="con_box_item2"><span class="con_box_item1_span1">设置权限</span>：
                            <span class="con_box_item1_span2">
                                <span class="con_box_item1_span2">
                                    <span v-for="(a,b) in datalist[0].privilege_str" :key="b">          
                                        <span v-for="(item,index) in limits_form.select_data" :key="index">
                                            <span v-if="item.maid == a" style="padding:0px 2px;">{{item.title}}</span>
                                        </span> 
                                    </span> 
                                </span>
                            </span>
                         </div>
                     </div>
                     <div class="con_box_item">
                         <div class="con_box_item2"><span class="con_box_item1_span1">贡献值</span>：<span class="con_box_item1_span2">-</span></div>
                     </div>
                      <div class="con_box_title">
                           <img class="con_box_title_img" src="@/assets/images/personal_bg2.png"  />
                           <div class="con_box_title_text"> 团队信息 </div>
                           <div class="con_box_title_line"></div>
                     </div>
                      <div class="con_box_item">
                         <div class="con_box_item1"><span class="con_box_item1_span1">所属团队</span>：
                            <span class="con_box_item1_span2">
                               <span v-if="datalist[0].leader ">
                                   <span  v-if="datalist[0].leader.telphone">{{ datalist[0].leader.telphone }} </span>
                                   <span style="padding-left:10px;" v-if="datalist[0].leader.nickname">{{ datalist[0].leader.nickname }} </span>
                                </span>
                               <span v-else>-</span>
                            </span>
                         </div>
                         <div class="con_box_item2"><span class="con_box_item1_span1">推 荐 人</span>：
                          <span class="con_box_item1_span2">
                                <span v-if="datalist[0].inviter" style="display:flex;"> 
                                    <span  v-if="datalist[0].inviter.telphone" style="display:flex;">
                                        {{ datalist[0].inviter.telphone  }}
                                    </span>
                                    <span style="padding-left:10px;" v-if="datalist[0].inviter.nickname">{{ datalist[0].inviter.nickname }}  </span>
                                    <img src="@/assets/images/a9.png" style="width:18px;height:20px;margin-left:5px;" @click="show_but(datalist[0].inviter.telphone)"/>
                                </span>
                                <span v-else>-</span>
                            </span>
                         </div>
                     </div>
                      <div class="con_box_item">
                         <div class="con_box_item1"><span class="con_box_item1_span1">好 友 数</span>：<span class="con_box_item1_span2">{{ datalist[0].direct_invite_count }}</span></div>
                         <div class="con_box_item2"><span class="con_box_item1_span1">团 队 数</span>：<span class="con_box_item1_span2">{{ datalist[0].sub_invite_count }}</span></div>
                     </div>
                    <div class="con_box_title">
                           <img class="con_box_title_img" src="@/assets/images/personal_bg3.png"  />
                           <div class="con_box_title_text"> 客服信息 </div>
                           <div class="con_box_title_line"></div>
                     </div>
                     <div class="con_box_item">
                         <div class="con_box_item1"><span class="con_box_item1_span1">访问次数</span>：
                             <span class="con_box_item1_span2">{{ datalist[0].visit_count }}</span>
                         </div>
                         <div class="con_box_item2"><span class="con_box_item1_span1">所属客服</span>：
                             <span class="con_box_item1_span2">
                                <span v-if="datalist[0].customer_service ">
                                   <span  v-if="datalist[0].customer_service.telphone">{{ datalist[0].customer_service.telphone }} </span>
                                   <span style="padding-left:10px;" v-if="datalist[0].customer_service.name">{{ datalist[0].customer_service.name }} </span>
                                </span>
                               <span v-else>-</span>
                             </span>
                        </div>
                     </div>
                     <div class="con_box_title">
                           <img class="con_box_title_img" src="@/assets/images/personal_bg4.png"  />
                           <div class="con_box_title_text"> 画像信息 </div>
                           <div class="con_box_title_line"></div>
                     </div>
                     <div class="con_box_item">
                         <div class="con_box_item1"><span class="con_box_item1_span1">性 别</span>：
                             <span class="con_box_item1_span2">
                                 <span v-if="datalist[0].sex == 0">-</span>
                                 <span v-if="datalist[0].sex == 1"> 男</span>
                                 <span v-if="datalist[0].sex == 2"> 女</span>
                             </span>
                        </div>
                         <div class="con_box_item2"><span class="con_box_item1_span1">年 龄</span>：<span class="con_box_item1_span2">{{ datalist[0].age }}</span></div>
                     </div>
                     <div class="con_box_item">
                         <div class="con_box_item1"><span class="con_box_item1_span1">职 业</span>：
                            <span class="con_box_item1_span2">
                               <span v-if="datalist[0].occupation"> {{ datalist[0].occupation }}</span>
                               <span v-else>-</span>
                            </span>
                         </div>
                         <div class="con_box_item2"><span class="con_box_item1_span1">年 收 入</span>：
                            <span class="con_box_item1_span2">
                                <span v-if="datalist[0].income">{{ datalist[0].income }}</span>
                                <span v-else>-</span>
                            </span>
                         </div>
                     </div>
                     
                     
                     
               </div>
        </div>
    
   </div>
</template>

<script>

export default {
   name: 'personal',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     }
   },
  data () {
    return {
        dtheight:'500',  //窗口高度
        limits_form:{
            select_data:[],
            select_num:[],
            input:''
        },
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 255
     this.gz_list()
 
  },
  mounted (){
    
  },
  methods: {
    gz_list(){
        this.post("/manor/listOfData", {
             
	        }).then(res => {
                this.limits_form.select_data = res.result.list
                //console.log(res)
         })
    },
    show_but(phone){
         this.$emit('up_list_fun',phone)
    },

  }
}
</script>


<style scoped>

.demo{
    overflow-y:auto;
}
.top_box{
    padding:0px 60px;
    box-sizing: border-box;
    width:100%;
    height: 148px;
    background:  #ECF6FF;
    display: flex;
    align-items: center;
}
.top_img_img{
    width:94px;
    height:94px;
    border-radius:50%;
}
.vip_img{
    width: 22px;
    height: 18px;
    margin-left:10px;
}
.top_text{
    margin-left:20px;
}
.top_text1{
    font-size: 24px;
    font-weight: bold;
    color: #262626;
    display: flex;
    align-items: center;
}
.top_text2{
    font-size: 16px;
    font-weight: 500;
    color: #888888;
    margin-top:10px;
}
.con_box{
    padding:10px 60px;
}
.con_box_title{
    display: flex;
    align-items: center;
    margin-top: 20px;
    height:45px;
    background:#c4daed;
    border-radius:5px;
    padding: 0px 30px;
    font-size: 18px;
}
.con_box_title_img{
    width:23px;
    height: 23px;
}
.con_box_title_text{
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin-left: 10px;
}
.con_box_item{
   display: flex;
   margin-top: 20px;
   padding:0px 30px;
}
.con_box_item1{
    flex: 1;
    display: flex;
    align-items: center;
}
.con_box_item2{
    flex: 1;
    display: flex;
    align-items: center;
}
.con_box_item1_span1{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    display: block;
    width: 85px;
    text-align-last: justify;
}
.con_box_item1_span2{
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #888888;
    display: block;
}
</style>